<template>
  <div class="beam-layout-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            v-model="defaultTime"
            :activeDate="activeDate"
            @conditionChange="selectGroupChange($event)"
          ></AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="getData()"> 查询 </a-button>
          <a-button type="primary" @click="dataDownload()">数据下载</a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="beam-table-container">
      <div class="table-header" header="拌和站数据"></div>
      <div class="main" v-loading="loading">
        <TableView>
          <template slot-scope="{ width, height }">
            <a-table
              :data-source="tableData"
              rowKey="id"
              :scroll="{ x: width, y: height }"
              :columns="tableColumns"
              :pagination="pager"
              @change="paginationChange"
            >
              <template
                v-for="col in tableColumns"
                :slot="col.scopedSlots.customRender"
                slot-scope="text, record"
              >
                <div
                  v-for="(item, index) in record[col.scopedSlots.customRender]"
                  :key="index"
                  class="table-row-text"
                >
                  {{ item }}
                </div>
              </template>
            </a-table>
          </template>
        </TableView>
      </div>
    </div>
  </div>
</template>

<script>
import AssociativeSelectGroup from "@/components/collect-app/AssociativeSelectGroup";
import { getField } from "@/api/common";
import {
  getMaterialTableData,
  bHDownLoad,
} from "@/api/wisdom-beam/collect-app";
import paginationMixins from "@/mixins/pagination";
import TableView from "@/components/tableView";
import { _getUUID, downLoadFileByArraybuffer } from "@/utils";
export default {
  mixins: [paginationMixins],
  components: {
    AssociativeSelectGroup,
    TableView,
  },
  data() {
    return {
      defaultTime: [],
      activeDate: [],
      conditionsData: {},
      selectMap: [
        //标段
        {
          type: "block",
          mode: "default",
          placeholder: "请选择标段",
          isDefault: true,
          allowClear: false,
          show: false,
        },
        //拌和站
        {
          type: "mixin",
          mode: "default",
          placeholder: "请选择拌和站",
          show: true,
        },
        //梁号
        {
          type: "placePart",
          mode: "default",
          placeholder: "请选择梁号",
          show: true,
        },
        //强度等级
        {
          type: "strength",
          mode: "default",
          placeholder: "请选择强度等级",
          show: true,
        },
        {
          type: "calendar",
        },
      ],
      tableColumns: [],
      tableData: [],
      loading: true,
    };
  },
  methods: {
    //数据下载
    dataDownload() {
      let {
        conditionsData: {
          block,
          engineerName = "",
          mixin,
          placePart,
          strength,
        },
        defaultTime,
      } = this;
      bHDownLoad({
        secCode: block,
        equCode: mixin,
        startTime: defaultTime[0],
        endTime: defaultTime[1],
        projectName: engineerName,
        strengthGrade: strength,
        placePart,
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "拌合数据");
        })
        .catch((_) => {});
    },

    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.getData();
    },

    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },
    //监听分页
    paginationChange(pagination) {
      let { current, pageSize } = pagination;
      this.pager.pageSize = pageSize;
      this.pager.page = current;
      this.getTableData();
    },
    //查询相关数据
    getData() {
      this.loading = true;
      Promise.all([this.getFieldData(), this.getTableData()])
        .then((result) => {
          this.tableColumns = [];
          let [columns, table] = result;
          columns.forEach((col) => {
            if (this.checkHasData(col.dataIndex, table)) {
              this.tableColumns.push(col);
            }
          });
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    checkHasData(key = "", data = []) {
      return data
        .map((v) => v[key])
        .flat()
        .some((v) => v != 0);
    },

    //查询字段列表
    getFieldData() {
      this.loading = true;
      this.tableColumns = [];
      return new Promise((resolve, reject) => {
        let {
          conditionsData: { block },
        } = this;
        getField({
          equCode: block,
          flag: "0",
        })
          .then((res) => {
            let cdata = [
              {
                title: "拌和站名称",
                dataIndex: "equName",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "equName" },
              },
              {
                title: "生产时间",
                dataIndex: "dischargeTime",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "dischargeTime" },
              },
              {
                title: "梁号",
                dataIndex: "placePart",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "placePart" },
              },
              {
                title: "强度等级",
                dataIndex: "strengthGrade",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "strengthGrade" },
              },
              {
                title: "批次号",
                dataIndex: "orderid",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "orderid" },
              },
              {
                title: "搅拌时间(s)",
                dataIndex: "stirTime",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "stirTime" },
              },
              {
                title: "方量(m³)",
                dataIndex: "volume",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "volume" },
              },
              {
                title: "类型",
                dataIndex: "typeName",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "typeName" },
              },
            ];
            res.data.result.forEach((item) => {
              cdata.push({
                title: item.equFieldName,
                dataIndex: item.equFieldDtu,
                key: _getUUID(32, 32),
                width: 100,
                scopedSlots: { customRender: item.equFieldDtu },
              });
            });
            resolve(cdata);
          })
          .catch((_) => {
            this.tableColumns = [];
            reject();
          });
      });
    },

    //查询表格数据
    getTableData() {
      return new Promise((resolve, reject) => {
        let { page, pageSize } = this.pager;
        let {
          conditionsData: { block, engineerName, mixin, placePart, strength },
          defaultTime,
        } = this;
        getMaterialTableData({
          secCode: block,
          equCode: mixin,
          startTime: defaultTime[0],
          endTime: defaultTime[1],
          projectName: engineerName,
          strengthGrade: strength,
          placePart,
          page,
          pageSize,
        })
          .then((res) => {
            this.pager.total = res.data.result.data.total;
            this.tableData = res.data.result.data.records;
            if (this.defaultTime?.length == 0) {
              this.defaultTime = [
                res.data.result.startTime,
                res.data.result.endTime,
              ];
            }
            resolve(this.tableData);
          })
          .catch((_) => {
            this.tableData = [];
            reject();
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.table-header {
  padding: 28px 20px !important;
}
</style>
